<div class="container">
    <fieldset>

        <legend>
            Nieuw Artikel
        </legend>
    </fieldset>
    <div class="row-fluid">
        <select ng-model="supplier" ng-options="s.number for s in suppliers" class="span2"></select>
        <input id="articleNumber" name="articleNumber" type="text" placeholder="Artikel Nummer" class="span2" ng-model="articleNumber" ui-event="{ blur : 'checkArticleNumber()' }">
        <input id="description" name="description" type="text" placeholder="Omschrijving" class="span8" ng-model="description">
    </div>
    <div class="row-fluid">
        <div class="span5">
            <div class="gridStyle smallGrid" ng-grid="gridSizeOptions"></div>
            <div class='ngGridCustomFooter'>
                <input id="size" name="size" type="text" placeholder="Maat" class="input-large" 
                       ng-model="newSize">
                <button class="btn btn-link" ng-click="addSize()">
                    Toevoegen
                </button>
            </div>
        </div>
        <div class="span2">
            <button class="btn topMargin" ng-click="addSizes(childrenSizes)">Kindermaten toevoegen</button>
            <button class="btn topMargin" ng-click="addSizes(womenSizes)">Vrouwenmaten toevoegen</button>
            <button class="btn topMargin" ng-click="addSizes(menSizes)">Mannenmaten toevoegen</button>
        </div>

        <div class="span5">
            <div class="gridStyle smallGrid" ng-grid="gridModelOptions"></div>
            <div class='ngGridCustomFooter'>
                <input id="model" name="model" type="text" placeholder="Model" class="input-medium" 
                       ng-model="newModel">
                <input id="modelDescription" name="modelDescription" type="text" placeholder="Omschrijving" class="input-medium"
                        ng-model="newModelDescription">
                <button class="btn btn-link" ng-click="addModel()">
                    Toevoegen
                </button>
            </div>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span5">
            <div class="gridStyle smallGrid" ng-grid="gridEanOptions"></div>
            <div class='ngGridCustomFooter'>
                <input id="ean" name="ean" type="text" placeholder="EANcode" class="input-small" 
                       ng-model="newEan">
                <select ng-model="newEanSize" ng-options="s.name for s in sizes" class="input-small"></select>
                <select ng-model="newEanModel" ng-options="m.code for m in models" class="input-small"></select>
                <button class="btn btn-link" ng-click="addEan()">
                    Toevoegen
                </button>
            </div>
        </div>
        <div class="span2"></div>
        <div class="span5">
            <div class="gridStyle smallGrid" ng-grid="gridPurchaseOptions"></div>
            <div class='ngGridCustomFooter'>
                <input id="purchase" name="purchase" type="text" placeholder="Aankoopprijs" class="input-small" 
                       ng-model="newPurchase">
                <input id="discount" name="discount" type="text" placeholder="Korting" class="input-small" 
                       ng-model="newDiscount">
                <select ng-model="newPurchaseSize" ng-options="s.name for s in sizes" class="input-small"></select>
                <select ng-model="newPurchaseModel" ng-options="m.code for m in models" class="input-small"></select>
                <button class="btn btn-link" ng-click="addPurchase()">
                    Toevoegen
                </button>
            </div>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12">
            <div class="gridStyle smallGrid" ng-grid="gridPriceOptions"></div>
            <div class='ngGridCustomFooter'>
                <input id="factor" name="factor" type="text" placeholder="Coefficient" class="input-medium"
                       ng-model="newFactor">
                <input id="computedPrice" name="computedPrice" type="text" placeholder="Berekende prijs" class="input-medium"
                       ng-model="computedPrice" disabled>
                <input id="price" name="price" type="text" placeholder="Prijs" class="input-medium" 
                       ng-model="newPrice">
                <select ng-model="newPriceClass" ng-options="pc.name for pc in priceClasses" class="input-medium"></select>
                <select ng-model="newPriceSize" ng-options="s.name for s in sizes" class="input-medium"></select>
                <select ng-model="newPriceModel" ng-options="m.code for m in models" class="input-medium"></select>
                <button class="btn btn-link" ng-click="addPrice()">
                    Toevoegen
                </button>
            </div>
        </div>
    </div>
    <div class="row-fluid">
        <btn class="btn btn-primary pull-right" ng-click="saveArticle()">Opslaan</btn>
    </div>
</div>